<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JavaScript DOM添加HTML元素</title>
		<style>
		p{
			width:100px;
			height:100px;
			border:1px solid;
			padding:10px;
			margin:10px;
			float:left;
		}
		</style>
    </head>
    <body>
        <h3>JavaScript DOM添加HTML元素</h3>
        <hr />
        <p>未添加元素的参照段落。</p>
		<p id="container">将被添加新元素的段落。</p>
        <script>
			//获取id="container"的段落元素对象
			var p = document.getElementById("container");
			//创建新元素
			var box = document.createElement("div");
			//设置新元素的背景颜色为黄色
			box.style.backgroundColor = "yellow";
			//设置新元素的内容
			box.innerHTML = "这是动态添加的div元素。";
			//将新创建的元素添加到id="container"的段落元素中
			p.appendChild(box);
        </script>
    </body>
</html>